<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'
import { LoginService } from '@/api/user';
import router from '../router';



const form = reactive({
    email: '2492655520@qq.com',
    password: '123456'
})

const status = ref(false)

async function submit() {
    status.value = true
    if ((form.email == null || form.email.length == 0) || (form.password == null || form.password.length == 0)) {
        ElMessageBox.alert("邮箱或密码不可为空")

    } else {
        try {
            let result = await LoginService(form)
            localStorage.setItem('Authorization', result.data)
            ElMessage.success("登录成功")
            router.push('/')
        } catch {
            status.value = false
        }
    }
    status.value = false

}

</script>


<template>
    <div class="login-bg">
        <div style="" class="form_box">
            <h1>用 户 登 录</h1>
            <el-form :model="form" label-width="auto" style="" size="large" class="my-form">
                <el-form-item label="" prop="email">
                    <el-input v-model="form.email" prefix-icon="User" placeholder="请输入您的邮箱" clearable />
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input v-model="form.password" type="password" prefix-icon="lock" placeholder="请输入您的密码"
                        show-password clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit" class="mybutton" :loading="status">
                        登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="text-box">
                <span id="left-text">
                    <router-link class="find" :to="{ name: 'register' }">用户注册</router-link>
                </span>
                <span id="right-text">
                    <router-link :to="{ name: 'findPsd' }" class="find">找回密码</router-link>
                </span>
            </div>
        </div>
    </div>
</template>

<style>
.login-bg {
    background-image: url('../../public/background2.png');
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.form_box {
    background-color: rgba(255, 255, 255, 0.95);
    width: 35%;
    height: 50%;
    position: absolute;
    top: 20%;
    right: 7%;
    border-radius: 15px;
}

h1 {
    color: #014369;
    text-align: center;
    margin-top: 40px;
}

.my-form{
    margin-top: 20px;
    padding: 45px 80px 0px 80px; 
    max-width: 100%;
}

.mybutton {
    width: 100%;
    /* margin-left: 25%; */
    /* margin: 0 40px 0 40px; */
    margin-top: 30px;
    /* padding: 30px; */
}

.text-box {
    margin-top: 50px;
    padding-bottom: 40px;
}

#left-text {
    float: left;
    margin-left: 14%;
}

#right-text {
    float: right;
    margin-right: 14%;
}

.find {
    color: #014369;
    text-decoration: none;
}

.find:hover {
    color: rgb(0, 191, 255);
    text-decoration: underline;
}
</style>